<template>
  <div>
    <h1>这是 Demo 页面</h1>
    <!-- 语言切换下拉菜单 -->
    <el-dropdown @command="handleLanguageChange" class="lang-dropdown">
      <span class="lang-selector">
        {{ currentLang === 'zh' ? '中文' : 'English' }}
        <el-icon><arrow-down /></el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="zh">{{ t('language.zh') }}</el-dropdown-item>
          <el-dropdown-item command="en">{{ t('language.en') }}</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup lang="ts">
import { ref} from 'vue'
import { useI18n }  from 'i18n'
// 处理语言切换
const { t, locale } = useI18n()
const currentLang = ref(locale.value)
const handleLanguageChange = (lang) => {
  locale.value = lang
  currentLang.value = lang
  localStorage.setItem('locale', lang)
}



</script>

<style scoped lang="scss"></style>